<template>
  <div class="zlcard1">
    <el-row gutter="30">

        <el-col v-for="(item,index) in shuju" :key="index" :span="8">
            <div class="content">
                <div class="dataname">{{ item.name }}</div>
                <div class="datanumber">{{ item.number }}</div>
            </div>
        </el-col>

    </el-row>
  </div>
</template>

<script>
export default {
    data() {
        return {
            shuju:[
                {name:"已认证产品",number:123456},
                {name:"认证机构",number:86},
                {name:"年度认证量",number:12890}
            ]
        }
    },
}
</script>

<style scoped>
.content{
    padding: 20px;
    border: 1px solid rgba(128, 128, 128, 0.329);
    border-radius: 10px;
    min-height: 100px;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: start;
}
.zlcard1{
    margin: 50px 0;
}
.dataname{
    font-size: 20px;
    color: gray;
}
.datanumber{
    font-size: 30px;
    color: #2b7b2f;
}
.dataname,.datanumber{
    margin: 10px 0;
}
</style>